.oval {
    background: blue;
    width: 100px;
    height: 100px;
    /* 生成椭圆 https://www.zhihu.com/topic/19550901/hot */
    border-radius: 50% / 100% 100% 0 0;
}


/* 将图形倾斜 但文字不倾斜 法一 嵌套 */


/* .button{
    width: 100px;
    height: 50px;
    background:pink;
    display: inline-block;
    transform: skewX(-45deg)
}
.button>div{
    transform: skewX(45deg)
} */


/* 将图形倾斜 但文字不倾斜 法二 位元素 */

.button {
    position: relative;
    /* 其他的文字颜色、内边距等样式…… */
}

.button::before {
    content: '';
    /* 用伪元素来生成一个矩形 */
    position: absolute;
    top: -20px;
    right: 0;
    bottom: 0;
    left: -20px;
    z-index: -1;
    background: #58a;
    width: 100px;
    height: 50px;
    background: pink;
    transform: skew(45deg);
}


/* 但是，最后的结果是把它裁切成了一个八角形。主要问题在于 max-width: 100%。100%会被
解析为容器（.picture）的边长。但是，
我们想让图片的宽度与容器的对角线相等，而不是与边长相等。因此需要使用 scale 将图片放大。 */


/* .rhombus{
    width: 200px;
    transform:rotate(45deg);
    overflow: hidden;
}
.rhombus>img{
    max-width:100%;
    transform: rotate(-45deg) scale(1.42);
} */


/* 方法二 裁切 */

.rhombus>img {
    width: 150px;
    height: 150px;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    transition: 1s clip-path;
}

.rhombus>img:hover {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.corner {
    width: 150px;
    height: 150px;
    background: #58a;
    background: linear-gradient(135deg, transparent 15px, #58a 0) top left, linear-gradient(-135deg, transparent 15px, #58a 0) top right, linear-gradient(-45deg, transparent 15px, #58a 0) bottom right, linear-gradient(45deg, transparent 15px, #58a 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}


/* scss写法 */


/* .corner {
    @mixin beveled-corners($bg, $tl: 0, $tr: $tl, $br: $tl, $bl: $tr) {
        background: $bg;
        background: linear-gradient(135deg, transparent $tl, $bg 0) top left, linear-gradient(225deg, transparent $tr, $bg 0) top right, linear-gradient(-45deg, transparent $br, $bg 0) bottom right, linear-gradient(45deg, transparent $bl, $bg 0) bottom left;
        background-size: 50% 50%;
        background-repeat: no-repeat;
    }
     调用
    @include beveled-corners(#58a, 15px, 5px);
} */

.corner2 {
    background: greenyellow;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle at top left, transparent 15px, greenyellow 0) top left, radial-gradient(circle at top right, transparent 15px, greenyellow 0) top right, radial-gradient(circle at bottom right, transparent 15px, gold 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, gold 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

.bor-img {
    width: 300px;
    height: 100px;
    border: 15px solid transparent;
    border-image: 1 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%2358a"><polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/></svg>');
    background: #58a;
    background-clip: padding-box;
}


/* .trapezoid {
    width: 200px;
    height: 150px;
    background: #58a;
    transform: perspective(.5em) rotate(5deg)
} */

.trapezoid a {
    position: relative;
    display: inline-block;
    padding: 1em 3em .1em;
}